<template>
  <div class="container">
    <!-- 卡券订单页面 -->
    <ul class="dv">
      <li
        v-for="(item,index) in orderStatus"
        :key="index"
        class="dv_item"
        :class="{'active' : currentIndex === index}"
        @click="checkOrder(item,index)"
      >{{item.value}}</li>
    </ul>
    <div class="bgbox" v-if="isbg">
      <img src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/bg1.png" alt class="nothing" />
      <div class="text">你还没有相关订单哦</div>
    </div>
    <scroll-div
      :scroll-y="true"
      :style="{'height': '100%'}"
      @scroll="scroll"
      @scrolltolower="pullrefresh"
      class="scroll_div"
    >
      <!-- <orderList :goods_info="goods_info" :refresh="refreshOther"></orderList> -->
      <ul class="ul_list">
        <li
          class="li"
          v-for="(item,index) in goods_info "
          :key="index"
          @click="todetail(item.order_id)"
        >
          <div class="top">
            <span
              v-if="(item.order_status==1 ||item.order_status==11)&& item.orderexpired_time !==-1"
            >剩余支付时间 {{item.orderexpired_time }}</span>
            <span class="text" v-if="item.order_status==1">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==2">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==3">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==4">{{item.order_status_name}}</span>
            <span class="text text1" v-if="item.order_status==5">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==6">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==7">{{item.order_status_name}}</span>
            <span class="text text1" v-if="item.order_status==8">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==9">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==10">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==11">{{item.order_status_name}}</span>
            <span class="text" v-if="item.order_status==12">{{item.order_status_name}}</span>
          </div>
          <!-- 卡样式 -->
          <div class="box" v-if="item.goods_type == 1"  :style="{background: 'url(' + imgUrl+item.goods_image + ')', backgroundSize:'100% ,100%'}">
            <div class="right">
              <div class="name">{{item.goods_name}}</div>
              <div class="describe">{{item.goods_describe}}</div>
              <div class="price">
                <span class="symbol">¥</span>
                {{item.goods_sale_price}}
                <!-- <span class="least" v-if="item.goods_min_sale_price" >
                  最低可至¥{{item.goods_min_sale_price}}
                  </span> -->
              </div>
            </div>
          </div>

          <!-- 券样式 -->
          <div class="ticketbox">
            <div class="box1" v-if="item.goods_type == 2">
              <div class="left">
                <div class="title">
                  <span class="type">[{{item.goods_sign}}]</span>
                  {{item.goods_name}}
                </div>
                <div class="desc">{{item.goods_describe}}</div>
              </div>
              <div class="right">
                <span class="icon1">¥</span>
                {{item.goods_sale_price}}
              </div>
            </div>
          </div>
          <div class="total">
            合计：¥{{item.order_all_price}}
            <span
              v-if="item.order_deduction_type == 1"
            >（含{{item.order_use_credit}}银币抵扣{{item.order_use_credit}}元）</span>
            <span
              v-if="item.order_deduction_type == 2"
            >（含{{item.order_use_credit}}银币抵扣{{item.order_use_credit}}元）</span>
          </div>
          <div class="bottom">
            <div class="btn btn1" v-if="item.is_finalpay_button==1" @click.stop="finalPayment(item)">补尾款</div>
            <div class="btn" v-if="item.is_pay_button==1" @click.stop="payment(item.order_id)">去付款</div>
            <div class="btn btn2" v-if="item.is_refund_button==1" @click.stop="refund(item)">申请退款</div>
            <div
              class="btn"
              style="margin-left:10px"
              v-if="item.is_cancel_button==1"
              @click.stop="orderCancel(item)"
            >取消</div>
          </div>
        </li>
      </ul>
    </scroll-div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      orderStatus: [
        {
          id: 0,
          value: "全部"
        },
        {
          id: 1,
          value: "待支付"
        },
        {
          id: 2,
          value: "定金支付"
        },
        {
          id: 3,
          value: "待退款"
        },
        {
          id: 4,
          value: "已取消"
        },
        {
          id: 5,
          value: "已完成"
        }
      ],
      currentIndex: 0,
      pageNum: 1,
      list: [],
      isbottom: false,
      order_scene: 1, //1卡券商城  2跳蚤市场
      order_status: 0, //0全部  1待支付 2定金支付 3待退款 4已取消 5已完成
      goods_info: "",
      pageSize: 10,
      timer: "",
      interval: "",
      timer2: "",
      isbg:false
    };
  },
  components: {
    // orderList
  },
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: "卡券订单"
    });
    this.currentIndex = 0;
    if (this.interval) {
      clearInterval(this.interval);
      clearInterval(this.timer2);
    }
    this.isbg = false;
    this.pageNum = 1;
    this.getData();
    // this.beginTimer();
 
   
  },
  mounted() {},
  methods: {
    checkOrder(item, index) {
      this.currentIndex = index;
      this.order_status = item.id;
      this.pageNum = 1;
      this.goods_info = [];
      this.isbottom = false;
      this.getData(this.order_status);
    },
    getData(e) {
      if (this.isbottom) {
        return false;
      }
      common.fly_post(
        "/api/v4_5/market_order/orderList",
        {
          order_scene: this.order_scene,
          order_status: e,
          page: this.pageNum,
          pageSize: this.pageSize
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
          
            if (res.data.length == 0 && this.pageNum > 1) {
              wx.showToast({
                title: "已经到最底下了",
                icon: "none",
                duration: 1000,
                mask: true
              });
              this.isbottom = true;
              this.isbg = false
              return false;
            } else if (res.data.length == 0 && this.pageNum == 1) {
              this.isbg = true
              //没有订单
              return;
            } else if (res.data.length > 0 && this.pageNum == 1) {
              this.goods_info = [];
              this.goods_info = res.data;
               this.isbg = false
            } else if (res.data.length > 0 && this.pageNum > 1) {
              this.goods_info.push(...res.data);
               this.isbg = false
            }
            // this.goods_info.forEach(element => {
            //   element.orderexpired_time = this.limitTimeFilter(element.order_expired_time)
            // });
            this.beginTimer()
            this.$forceUpdate()
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    pullrefresh() {
      this.pageNum++;
      this.getData(this.order_status);
    },
    // refreshOther() {
    //   this.getData();
    // },
    todetail(e) {
      wx.navigateTo({
        url: "/pages/ct_store/card_ticket_order_detail/main?order_id=" + e
      });
    },
    finalPayment(item) {
      //补尾款
      wx.navigateTo({
        url:
          "/pages/ct_store/confirm_info/main?order_scene=1" +
          "&order_type=3" +
          "&goods_id=" +
          item.goods_id +
          "&order_id=" +
          item.order_id
      });
    },
    refund(item) {
      wx.navigateTo({
        url: "/pages/ct_store/apply_refund/main?order_id=" + item.order_id
      });
    },
    orderCancel(item) {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/v4_5/market_order/orderCancel",
        {
          order_id: item.order_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            this.getData();
            wx.showToast({
              title: "订单取消",
              icon: "none",
              duration: 2000,
              mask: true
            });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    payment(order_id) {
      common.fly_post(
        "/api/v4_5/market_order/orderPay",
        {
          order_id: order_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            payEvent(
              res.data.body_title,
              res.data.order_sn,
              res.data.order_price,
              res.data.order_type
            );
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    beginTimer() {
      clearInterval(this.interval)
      //这个计时器是每秒减去数组中指定字段的时间
      this.interval = setInterval(() => {
        for (let i = 0, len = this.goods_info.length; i < len; i++) {
          const item = this.goods_info[i];
          if (item.order_expired_time > 0) {
            this.goods_info[i].order_expired_time =
              this.goods_info[i].order_expired_time - 0.01;
            this.goods_info[i].orderexpired_time = this.limitTimeFilter(
              this.goods_info[i].order_expired_time
            );
          }
        }
      }, 1000);
    },
    limitTimeFilter(result) {
      var now = new Date() / 1000;
      result = Math.floor(result - now);

      if (result > 0) {
        var second = parseInt(result % 60); // 计算秒 ，取余
        var minite = parseInt((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
        var hour = parseInt((result / 60 / 60) % 24); //计算小时
        // console.log(hour +'---hour')
        if (hour == 0) {
          hour = "00";
        } else {
          hour = "01";
        }
        if (minite < 10) {
          minite = "0" + minite;
        } else {
          minite = minite;
        }
        if (second < 10) {
          second = "0" + second;
        } else {
          second = second;
        }
        result = hour + ":" + minite + ":" + second;
        console.log(result);
      } else {
        // clearInterval(this.interval)
        result = '';
      }
      return result;
    },
   
  },

  onShow() {
    this.getData();
    clearInterval(this.interval)
  },
   onUnload () {
    clearInterval(this.interval)
  },
  onHide () {
    clearInterval(this.interval)
  },
  destoryed(){
    clearInterval(this.interval)
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f7f7;
  overflow: hidden;
}

.dv {
  width: 100%;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  color: #666;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 11px 17px;
}
.dv_item {
  width: auto;
  height: 30px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  // margin-right: 10px;
  float: left;
}
.active {
  color: #3EB0A9;
}
.list {
  width: 100%;
  height: 100%;
  /* padding:0 15px; */
  box-sizing: border-box;
  background: #fff;
  // padding: 0 15px;
}
.list_li {
  height: 59px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #f3f4f6;
}
.title {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 20px;
}
.time {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  line-height: 17px;
}
.amount {
  height: 24px;
  font-size: 17px;
  font-weight: 500;
  color: #333;
  line-height: 24px;
  position: absolute;
  right: 31px;
  top: 18.5%;
}
.icon {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 27%;
  right: 15px;
}
.tip {
  font-size: 10px;
  color: #666;
  line-height: 14px;
  position: absolute;
  right: 0;
  top: 48%;
}
.red {
  color: #ff383e;
}
.bgbox {
  width: 100%;
  height: 100%;
  padding: 90px 0;
  box-sizing: border-box;
  .nothing {
    width: 128px;
    height: 114px;
    margin: 0 auto;
    display: block;
  }
  .text {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin-top: 13px;
    color: rgba(153, 153, 153, 1);
    text-align: center;
  }
}
.ul_list {
  width: 100%;
  box-sizing: border-box;
  background: #f7f7f7;
  padding-bottom: 30px;
  .li {
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    background: #fff;
    margin-bottom: 10px;
    &.li:nth-last-of-type(1) {
      margin-bottom: 0;
    }
    .top {
      color: #3EB0A9;
      height: 16px;
      line-height: 16px;
      margin-bottom: 8px;
      .text {
        float: right;
      }
      .text1{
        color: #999;
      }
    }
    .box {
      width: 100%;
      height: 155px;
      border-radius:8px;
      background-size: 100% 100%;
      padding: 20px;
      box-sizing: border-box;
      color:#fff;
      .right {
        height: 114px;
        // width: 62%;
        position: relative;
        .name {
          width: 80%;
          height: auto;
          font-size: 18px;
          // color: #e11953;
          margin-bottom: 4px;
        }
        .describe {
          font-size: 14px;
          // color: #e11953;
          margin-bottom: 53px;
          height: 40px;
          width: 85%;
        }
        .price {
          font-size: 21px;
          // color: rgba(255, 56, 62, 1);
          font-weight: 500;
          position: absolute;
          bottom: 0;
          left: 0;
          .symbol {
            font-size: 14px;
            margin-right: 1px;
          }
          .least{
            font-size: 12px;
          }
          .icon {
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 50%;
            margin-left: 8px;
            margin-right: 1px;
            vertical-align: middle;
          }
          .text1 {
            color: #f5d040;
            font-size: 10px;
            height: 14px;
            display: inline-block;
            line-height: 14px;
          }
        }
      }
    }
    .ticketbox {
      background: #f3f4f6;
      .box1 {
        height: 121px;
        display: flex;
        background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/ticket_bg.png")
          no-repeat;
        background-size: 100% 100%;
        box-shadow: 1px 2px 6px 2px rgba(240, 240, 240, 1);
        border-radius: 8px;
        .left {
          width: 71.5%;
          padding: 14px;
          box-sizing: border-box;
          border-radius: 8px;

          .title {
            height: auto;
            font-size: 14px;
            color: #333333;
            margin-bottom: 10px;
            .type {
              color: #ff383e;
            }
          }
          .desc {
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
            line-height: 17px;
          }
        }
        .right {
          width: 28.5%;
          border-radius: 8px;
          font-size: 21px;
          color: #ff383e;
          // background:#fbfbfb;
          text-align: center;
          box-sizing: border-box;
          padding-top: 41px;
          .icon1{
            font-size: 14px;
            margin-right: -8px;
          }
        }
      }
    }

    .total {
      width: 100%;
      box-sizing: border-box;
      // padding-right: 10px;
      text-align: right;
      font-size: 12px;
      color: rgba(102, 102, 102, 1);
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .bottom {
      width: 100%;
      text-align: right;
      .btn {
        width: 72px;
        height: 28px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        border-radius: 14px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 28px;
        text-align: center;
        display: inline-block;
        // float: right;
      }
      .btn1{
        margin-right: 10px;
      }
      .btn2{
        border:1px solid rgba(204,204,204,1);
        color:rgba(155,155,155,1);
        background: #fff;
      }
    }
  }
}
</style>

